<!-- 交易页面：秒合约，币币交易，U本位 -->
<template>
  <div>
    <TopNavBar :title="$route.query.title || '期权交易'" type="back"  @rightClick="handleRightClick"  right rightType="true" />
    <!-- tabs -->
    <!-- <van-sticky>
      <div class="headerList">
        <div class="left">
          <svg-load name="jiantou-z" class="leftImg" @click="_back()"></svg-load>
        </div>
        <div class="headerChoose">
          <van-tabs
            swipeable
            shrink
            :swipe-threshold="2"
            v-model:active="currentIndex"
            line-width="20"
            line-height="2"
            color="#fff"
            title-active-color="#fff"
            title-inactive-color="#5d626d"
          >
            <van-tab v-for="(item, index) in headerList" :key="index" :title="item.title">
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </van-sticky> -->
    <!-- tab -->
    <component
      :is="currentComponent"
      :headerList="headerList"
      :symbol="symbol"
    ></component>
  </div>
</template>

<script setup>
import { _t18 } from '@/utils/public'
import { useMainStore } from '@/store/index'
const mainStore = useMainStore()
import { useTradeStore } from '@/store/trade'
const tradeStore = useTradeStore()
import { useRoute } from 'vue-router'
const $route = useRoute()
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
const $router = useRouter()
import SecondContract from './components/tradeSecondContract.vue'
import BBTrading from './components/tradeBBTrading.vue'
import Ustandard from './components/tradeUstandard.vue'
import TopNavBar from '@/components/common/TopNavBar.vue'
// tabs
const headerList = computed(() => {
  let tempList = mainStore.getTradeHeaderList.filter((item, index) => {
    return item.componentName != 'Optional'
  })
  return tempList
})
const symbol = ref('btcusdt')
watch(
  () => $route.query.symbol,
  (val) => {
    symbol.value = val
  },
  { immediate: true }
)
// 让 currentIndex 响应 tabIndex
const currentIndex = ref(0)
watch(
  () => $route.query.tabIndex,
  (tabIndex) => {
    if (tabIndex !== undefined) {
      currentIndex.value = Number(tabIndex)
    }
  },
  { immediate: true }
)

// currentIndex 变化时，更新 mainStore
watch(
  currentIndex,
  (n) => {
    mainStore.setTradeFlag(n)
    tradeStore.getCoinList()
  }
)

// 切换组件
const currentComponent = computed(() => {
  let temp = ''
  if (headerList.value[currentIndex.value]?.componentName == 'SecondContract') {
    temp = SecondContract
  }else if (headerList.value[currentIndex.value]?.componentName == 'BBTrading') {
    temp = BBTrading
  }else if (headerList.value[currentIndex.value]?.componentName == 'Ustandard') {
    temp = Ustandard
  }
  return temp
})

onMounted(()=>{
  tradeStore.getCoinList()
})

// 处理右侧按钮点击
const handleRightClick = () => {
  if (currentIndex.value == 0) {
    $router.push('/quantContractOrder1')
  } else if (currentIndex.value == 1) {
    $router.push('/quantCurrencyOrder') 
  } else {
    $router.push('/quantUstandardOrder') 
  }
  
}
</script>

<style lang="scss" scoped>
.headerList {
  height: 60px;
  border-bottom: 1px solid var(--ex-border-color);
  display: flex;
  align-items: center;
  background: var(--ex-home-list-bgcolor);
  z-index: 9;
  padding-left: 15px;

  .left {
    display: flex;
    font-size: 16px;
    font-weight: normal;
    color: var(--ex-default-font-color);

    .leftImg {
      width: 16px;
      height: 12px;
      margin-right: 15px;
    }
  }

  .headerChoose {
    display: flex;
    padding: 0 15px 0 0;
    background: var(--ex-home-list-bgcolor);

    :deep(.van-tabs__wrap) {
      height: 59px;
    }

    :deep(.van-tabs__nav) {
      background: var(--ex-home-list-bgcolor);
    }

    :deep(.van-tab) {
      flex: none;
      font-size: 16px;
      margin-right: 30px;
      padding: 0;
      color: var(--ex-home-list-ftcolor) !important;
      background: var(--ex-home-list-bgcolor);
    }

    :deep(.van-tab--active) {
      font-weight: normal;
      color: #fff!important;
    }
  }
}
</style>
